<template>
    <n-tooltip trigger="hover">
      <template #trigger>
        <n-button @click="handleSwitchTheme" text>
          <n-icon :size="size">
            <Icon icon="ph:sun-duotone" v-if="theme==='light'"></Icon>
            <Icon icon="ph:moon-bold" v-else></Icon>
          </n-icon>
        </n-button>
      </template>
      <span>切换主题</span>
    </n-tooltip>
</template>

<script setup lang="ts">

import {Icon} from "@iconify/vue";
import {storeToRefs} from "pinia";
import {useAppStore} from "@/store/module/app";
import {useDark, useToggle} from '@vueuse/core'


defineProps({
  size:{
    type:Number,
    default:32
  }
})

const isDark = useDark()
const toggleDark = useToggle(isDark)

const {theme} = storeToRefs(useAppStore())
const handleSwitchTheme = () => {
  if (isDark.value && theme.value === 'light') {
    toggleDark()
  }
  toggleDark()
  theme.value === 'light' ? theme.value = 'dark' : theme.value = 'light'
}
</script>

<style scoped>

</style>